<template class="body">
<div class="body">
    <main class="bd">
        <header class="bd__helper">
            <div class="helper__title">
                🤗 请问有什么可以帮到您？
            </div>
            <div class="helper__desc">
                我能为您提供全方位的医疗服务，让您的健康更加便捷。
            </div>
            <!-- <el-button type="primary" size="large" class="helper__btn" :icon="Microphone" round>与 AI 对话问询</el-button> -->
        </header>
        <nav class="bd__nav">
            <el-row v-for="(row, i) in navList" :key="i">
                <el-col :span="8" v-for="(col, j) in row.items" :key="j">
                    <div class="nav-item" @click="routerPush(col.route)">
                        <div class="nav-item__icon-area">
                            <i v-if="col.icon" class="iconfont nav-item__icon" :class="col.icon"></i>
                        </div>
                        <div class="nav-item__text-area">
                            <div class="nav-item__title">
                                {{ col.title }}
                            </div>
                            <p class="nav-item__desc">
                                {{ col.desc }}
                            </p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </nav>
        <el-button type="info" size="large" :icon="InfoFilled" class="bd__btn" round>关于我们</el-button>
    </main>
</div>
</template>

<script setup>
import { Microphone, InfoFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const navList = [
    {
        row: 1,
        items: [
            {
                icon: 'icon-wenzhentijian',
                title: '智能导诊自查',
                desc: '输入症状，我们将为您快速提供可能的疾病诊断，帮助您及时采取措施。',
                route: '/self-check'
            },
            {
                icon: 'icon-guahaowenzhen',
                title: '智能药品查询',
                desc: '快速查找药品信息，了解用药指导与注意事项，保障用药安全。',
                route: '/medicine'
            },
            {
                icon: 'icon-jiankangdangan',
                title: '精准病例分析',
                desc: '利用 AI 技术深度剖析病例，提供解读与诊断建议，助您更好地了解疾病。',
                route: '/case'
            },
        ]
    },
    {
        row: 2,
        items: [
            {
                icon: 'icon-zaixianwenzhen',
                title: '医学知识图谱',
                desc: '构建全面医学知识体系，助您精准医疗决策。',
                route: '/knowledge'
            },
            {
                icon: 'icon-hulianwangyiyuan',
                title: '全国医院查询',
                desc: '快速定位优质医疗资源，解决就医迷茫。',
                route: '/hospital'
            },
            {
                icon: 'icon-yisheng',
                title: '智能健康助理',
                desc: '随时随地为您提供健康咨询，解答疑问，关注健康。',
                route: '/assistant'
            }
        ]
    }
]

const routerPush = (route) => {
    router.push(route);
}
</script>

<style lang="scss" scoped>
$help-title-color: #333;
$help-text-color: #666;
$bd-bg-color: linear-gradient(to bottom right, #B5D8FE, #3E87FC);
$nav-bg-color: linear-gradient(to left, #F7CE52, #F7A13E);;
$navicon-bg-color: #4A62A7;
$navicon-color: #fff;
$nav-title-color: #545454;
$nav-desc-color: #545454;

.bd {
    padding: 2rem;
    box-sizing: border-box;
    height: 95vh;
    overflow: hidden;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    background: $bd-bg-color;

    &__helper {
        margin-top: 2rem;
        text-align: center;

        .helper__title {
            font-size: 3rem;
            color: $help-title-color;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .helper__desc {
            font-size: 1.5rem;
            color: $help-text-color;
            margin-bottom: 2rem;
        }

        .helper__btn {
            font-size: 1rem;
            font-weight: bold;
            padding: 1.5rem 2rem;
        }
    }

    &__nav {
        margin-top: 2rem;

        .nav-item {
            display: flex;
            height: 20vh;
            margin: 1rem 1rem;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            background: $nav-bg-color;
            cursor: pointer;

            .nav-item__icon-area {
                background: $navicon-bg-color;
                border-radius: 20px 0 0 20px;
                flex: 1;
                padding: 1rem;
                display: flex;
                justify-content: center;
                align-items: center;

                .nav-item__icon {
                    font-size: 4rem;
                    color: $navicon-color;
                }
            }

            .nav-item__text-area {
                flex: 3;
                padding: 1rem;

                .nav-item__title {
                    font-size: 2rem;
                    color: $nav-title-color;
                    font-weight: bold;
                    margin-bottom: 1rem;
                }

                .nav-item__desc {
                    font-size: 1.25rem;
                    font-weight: bold;
                    color: $nav-desc-color;
                    opacity: 0.8;
                    font-family: '宋体';
                }
            }
        }

        .nav-item:hover {
            transform: scale(1.05);
            transition: all 0.5s;
        }
    }

    &__btn {
        margin-top: 2rem;
        font-size: 1.5rem;
        font-weight: bold;
        padding: 2rem 3rem;
    }
}


</style>